// 监听事件, 当插件安装时打印日志
chrome.runtime.onInstalled.addListener(function () {
  console.log("TODO 插件已被安装");
  // 注意所有代码都应该在安装插件完成后写

  // storage 设置值(注意这里调 chrome.storage 和我们 localStorage 和 sessionStorage 不是同一个东西但使用类似)
  chrome.storage.sync.set({ color: "#3aa757", m: 2, n: 4 }, function () {
    console.log("chrome storage 设置存储一个对象");
  });

  // storage 获取值
  chrome.storage.sync.get("color", function (data) {
    console.log("获取到对应存储值 color", data); // { color: "3aa757" }  只能取到存储对应属性数据
  });

  chrome.storage.sync.get("m", function (data) {
    console.log("获取到对应存储值 m", data); // { m: 2 }
  });

  // 特定网址显示图标
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
    // chrome.declarativeContent 于精确地控制什么时候显示我们的页面按钮
    // chrome.declarativeContent.onPageChanged.addRules([
    //   {
    //     conditions: [
    //       new chrome.declarativeContent.PageStateMatcher({
    //         pageUrl: { hostEquals: "baidu.com" },
    //       }),
    //     ],
    //     actions: [new chrome.declarativeContent.ShowPageAction()],
    //   },
    // ]);
  });

  // 获取浏览器 tabs
  chrome.storage.sync.get("bgColor", function (data = {}) {
    const { bgColor = "#fff" } = data;
    console.log("背景颜色", bgColor);
    // chrome.tabs API 主要是和浏览器标签进行交互通过 query 找到当前激活中 tab 然后使用 executeScript 向标签页注入脚本内容
    // chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    //   chrome.tabs.executeScript(tabs[0].id, {
    //     code: `document.body.style.backgroundColor="${color}"`,
    //   });
    // });
    //! 使用 tabs API 同样需要在 mainifest 中注入 acticeTab 权限
  });
});

//! 注意上面使用到 storage  declarativeContent 都是需要在 mainifest.json 中给插件注册 permissions 配置注入才有使用权限

//! 此文件不需要引入 popup.html 文件中，而是在 manifest.json 中配置插件运行就会执行此文件

// 目前此文件仅当熟悉谷歌插件练习代码 (插件点击查看视图旁边的背景页，看到我们此文件设置的 background 打印输出)(如果未看到输出则刷新插件重新操作)
// 可能导致不输出原因是可能先打开扩展程序选项页(因为此文件只会当插件安装成功执行一次)
